<template>
	<view class="userInfo">
		<view class="top">
			<u-navbar leftIconColor="#fff" :fixed="true" @leftClick="left">
			</u-navbar>
		</view>
		<view class="userInfo_main">
			<view class="avatar">
				<image src="../../static/p1.jpg" mode=""></image>
			</view>
			<view class="change_avatar">
				<text>点击更换头像</text>
			</view>
			<u-cell title="名字" :isLink="true" arrow-direction="right" :value="userInfo.username"></u-cell>
			<u-cell title="性别" :isLink="true" arrow-direction="right" :value="userInfo.sex"></u-cell>
			<u-cell title="生日" :isLink="true" arrow-direction="right" :value="userInfo.birthday"></u-cell>
			<u-cell title="所在地" :isLink="true" arrow-direction="right"></u-cell>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {

			}
		},
		computed: {
			userInfo() {
				let n = JSON.parse(JSON.stringify(this.$store.state.users.info))
				return n
			}
		},
		methods: {
			left() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content[data-v-95dec1ae] {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.userInfo {
		width: 750rpx;
		// height: 100vh;
		background-color: rgb(61, 167, 251)
	}

	.top {
		height: 200rpx;
		// background-color:rgb(61, 167, 251) ;
	}

	.userInfo_main {
		border-radius: 26rpx 26rpx 0 0;
		position: relative;
		background-color: #fff;
		box-sizing: border-box;
		padding: 26rpx;

		.avatar {
			width: 160rpx;
			height: 160rpx;
			background-color: #fff;
			border-radius: 50%;
			box-sizing: border-box;
			padding: 10rpx;
			position: relative;
			top: -60rpx;
			left: 50%;
			transform: translate(-50%);

			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}

		.change_avatar {
			margin-top: -40rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>
